<template>
  <div class="content">
    <el-card class="box-card">
      <template #header>
        <el-form :model="formInline" class="grids columnsLine4">
          <el-form-item label="出库计划单">
            <el-button type="primary" text @click="proxy.$utils.toLink(`/delivery/deliveryPlanDetails?id=${formInline.planId}`)">{{formInline.deliveryNo}}</el-button>
          </el-form-item>
          <el-form-item label="计划出库日期">
            {{formInline.plannedDate}}
          </el-form-item>
          <el-form-item label="客户">
            {{formInline.customersName}}
          </el-form-item>
          <el-form-item label="结算客户">
            {{formInline.settlementCustomersName}}
          </el-form-item>
          <el-form-item label="出库类型">
            {{counter.idString_format("deliveryType",formInline.deliveryType)}}
          </el-form-item>
          <el-form-item label="收货地址">
            {{formInline.deliveryAddress}}
          </el-form-item>
          <el-form-item label="总重量（KG）">
            {{formInline.totalWeight}}
          </el-form-item>
          <el-form-item label="总体积（m³）">
            {{formInline.totalVolume}}
          </el-form-item>
          <el-form-item label="出库状态">
            {{counter.idString_format("deliveryStatus",formInline.status)}}
          </el-form-item>
          <el-form-item label="创建人">
            {{formInline.createBy}}
          </el-form-item>
          <el-form-item label="创建时间">
            {{formInline.createTime}}
          </el-form-item>
          <el-form-item label="备注">
            {{formInline.remark}}
          </el-form-item>
        </el-form>
      </template>
    </el-card>

    <el-card class="box-card">
      <template #header>
        <el-form :model="form" class="grids columnsLine4">
          <el-form-item label="货物编码">
            <el-input v-model="form.cargoSn" placeholder="请输入货物编码" clearable />
          </el-form-item>
          <el-form-item label="货物名称">
            <el-input v-model="form.cargoName" placeholder="请输入货物名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="init">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <div class="actionBtn">
        <el-button type="primary" @click="proxy.$refs.addCargoCom.open(deliveryNo,planNo)">新增</el-button>
        <!-- <el-button type="primary" plain>保存</el-button> -->
        <el-button type="danger" plain :disabled="selectArr.length==0" @click="handleClick('',3)">批量删除</el-button>
      </div>

      <el-table :data="tableParams.rows" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="lotNo" label="批次号" min-width="150" align="center" />
        <el-table-column prop="cargoSn" label="货物编码" min-width="150" align="center" />
        <el-table-column prop="cargoName" label="货物名称" />
        <el-table-column prop="address" label="托盘码" min-width="150" align="center">
          <template #default="scope">
            <selectTray v-model="scope.row.trayId" readonly="1"></selectTray>
          </template>
        </el-table-column>
        <el-table-column prop="trayNum" label="当前托盘数量" min-width="120" align="center" />
        <el-table-column prop="num" label="出库数量" />
        <el-table-column prop="unitPrice" label="单价" />
        <el-table-column prop="amount" label="金额" />
        <el-table-column prop="address" label="单位">
          <template #default="scope">
            <selectUnit v-model="scope.row.cargoUnit" readonly="1"></selectUnit>
          </template>
        </el-table-column>
        <el-table-column label="货物属性">
          <template #default="scope">
            {{scope.row.type==1?"良品":"不良品"}}
          </template>
        </el-table-column>
        <el-table-column label="工厂">
          <template #default="scope">
            <selectFactory v-model="scope.row.factoryId" readonly="1"></selectFactory>
          </template>
        </el-table-column>
        <el-table-column label="仓库" align="center">
          <template #default="scope">
            <selectStores v-model="scope.row.storeId" readonly="1"></selectStores>
          </template>
        </el-table-column>
        <el-table-column label="库区" align="center">
          <template #default="scope">
            <selectStoreRegion v-model="scope.row.storeRegionId" readonly="1"></selectStoreRegion>
          </template>
        </el-table-column>
        <el-table-column label="库位" align="center" min-width="150">
          <template #default="scope">
            <selectStoreLocation v-model="scope.row.storeRegionLocationId" readonly="1"></selectStoreLocation>
          </template>
        </el-table-column>
        <el-table-column prop="cargoSpec" label="规格" width="150" align="center" />
        <el-table-column prop="validityDate" label="有效期" width="150" align="center" />
        <el-table-column prop="address" label="操作" width="100" fixed="right" align="center">
          <template #default="scope">
            <el-button type="primary" icon="Edit" circle @click="handleClick(scope.row,1)" />
            <el-button type="danger" icon="Delete" circle @click="handleClick(scope.row,2)" />
          </template>
        </el-table-column>
      </el-table>
      <Pagination v-if="tableParams['total']" :total="tableParams['total']" v-model:page="form.pageNum" v-model:limit="form.pageSize" @pagination="getInfo" />
    </el-card>

    <addCargo ref="addCargoCom" @fatherMethods="init"></addCargo>
  </div>
</template>

<script setup lang="ts">
import addCargo from "@/views/delivery/components/addCargo.vue";
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
import { onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
let planId = null;
let deliveryNo = null;
let planNo = null;
let formInline = ref({});
let form = ref({
  pageSize: 10,
  pageNum: 1,
  cargoSn: "",
  cargoName: "",
  deliveryNo: "",
});
let tableParams = ref({});
let selectArr = ref([]);

// 生命周期
onMounted(async () => {
  planId = route.query.id;
  await getDatails();
  search();
});

let getDatails = async () => {
  let { data } = await proxy.$apis.deliveryRecordDetails(planId);
  //console.log("详情", data);
  formInline.value = data;
  deliveryNo = data.deliveryNo;
  planNo = data.planNo;
};
let getInfo = async () => {
  form.value.deliveryNo = deliveryNo;
  tableParams.value = await proxy.$apis.deliveryRecordDetailList(form.value);
};
let search = () => {
  form.value.pageNum = 1;
  getInfo();
};
let init = () => {
  form.value = {
    pageSize: 10,
    pageNum: 1,
    cargoSn: "",
    cargoName: "",
    deliveryNo: "",
  };
  getInfo();
};
let handleClick = async (row, num) => {
  switch (num) {
    case 1:
      proxy.$refs.addCargoCom.open(deliveryNo, planNo, row);
      break;
    case 2:
      let resp = await proxy.$utils.confirmTips("是否确定删除?");
      if (!resp) return;
      await proxy.$apis.deliveryRecordDetailDel(row.id);
      proxy.$utils.showToast("删除成功");
      init();
      break;
    case 3:
      let ret = await proxy.$utils.confirmTips("是否确定批量删除?");
      if (!ret) return;
      for (let index = 0; index < selectArr.value.length; index++) {
        const element = selectArr.value[index];
        await proxy.$apis.deliveryRecordDetailDel(element.id);
      }
      proxy.$utils.showToast("删除成功");
      init();
      break;
    default:
      break;
  }
};
let handleSelectionChange = (e) => {
  selectArr.value = [...e];
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;
  .el-form {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
.actionBtn {
  margin-bottom: 15px;
}
</style>
